import React from 'react';
import {
  Row,
  Col,
  Form,
  Input,
  InputNumber,
  Table,
  DatePicker,
  Radio,
  Button,
  Checkbox,
} from 'antd';

class CarRental extends React.Component {
  state = {
    selectedRowKeys: [],
    orderList: [
      {
        key: 1,
        info: '测试数据',
        orderNo: '12312212',
      },
    ],
  };

  onSelectChange = selectedRowKeys => {
    this.setState({
      selectedRowKeys,
    });
  };

  render() {
    const { form: { getFieldDecorator } } = this.props;
    const { selectedRowKeys, orderList } = this.state;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 2 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 10 },
      },
    };

    const columns = [
      {
        key: 'info',
        title: '货品信息',
        dataIndex: 'info',
      },
      {
        key: 'orderNo',
        title: '订单号',
        dataIndex: 'orderNo',
      },
      {
        key: 'action',
        title: '操作',
        dataIndex: 'action',
        render: (text, record) => {
          return (
            <React.Fragment>
              <Checkbox>
                <span style={{ color: '#ff8000' }}>编辑装货信息</span>
              </Checkbox>
            </React.Fragment>
          );
        },
      },
    ];

    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };

    return (
      <React.Fragment>
        <Row style={{ marginBottom: 24 }}>
          <Col>
            <Table
              title={() => '请选择申请物流的订单'}
              bordered
              pagination={false}
              rowSelection={rowSelection}
              columns={columns}
              dataSource={orderList}
            />
          </Col>
        </Row>
        <Form>
          <Form.Item
            {...formItemLayout}
            label='用车时间'
          >
            {getFieldDecorator('ycsj', {
              rules: [
                {
                  required: true,
                  message: '请选择用车时间',
                },
              ],
            })(
              <DatePicker.RangePicker format='YYYY-MM-DD HH:mm' />
            )}
          </Form.Item>
          <Form.Item
            {...formItemLayout}
            label='货车类型'
          >
            {getFieldDecorator('hclx', {
              rules: [
                {
                  required: true,
                  message: '请选择货车类型',
                },
              ],
            })(
              <Radio.Group>
                <Radio value='1'>类型一</Radio>
                <Radio value='2'>类型二</Radio>
                <Radio value='3'>类型三</Radio>
                <Radio value='4'>其他</Radio>
              </Radio.Group>
            )}
          </Form.Item>
          <Form.Item
            {...formItemLayout}
            label='用车数量（辆）'
          >
            {getFieldDecorator('ycsl', {
              rules: [
                {
                  required: true,
                  message: '请输入用车数量',
                },
              ],
            })(
              <InputNumber precision={0} min={1} />
            )}
          </Form.Item>
          <Form.Item
            {...formItemLayout}
            label='车辆要求'
          >
            {getFieldDecorator('clyq', {
              rules: [
                {
                  required: true,
                  message: '请选择车辆要求',
                },
              ],
            })(
              <Radio.Group>
                <Radio value='1'>全封闭</Radio>
                <Radio value='2'>冷链</Radio>
                <Radio value='3'>其他</Radio>
              </Radio.Group>
            )}
          </Form.Item>
          <Form.Item
            {...formItemLayout}
            label='增值服务'
          >
            {getFieldDecorator('zzfw', {
              rules: [
                {
                  required: true,
                  message: '请选择增值服务',
                },
              ],
            })(
              <Radio.Group>
                <Radio value='1'>保价运输</Radio>
                <Radio value='2'>安全包装</Radio>
                <Radio value='3'>签收返单</Radio>
                <Radio value='4'>开具发票</Radio>
              </Radio.Group>
            )}
          </Form.Item>
          <Form.Item
            {...formItemLayout}
            label='支付方式'
          >
            {getFieldDecorator('zffs', {
              rules: [
                {
                  required: true,
                  message: '请选择支付方式',
                },
              ],
            })(
              <Radio.Group>
                <Radio value='1'>预支付</Radio>
                <Radio value='2'>货到付款</Radio>
                <Radio value='3'>分阶段付款</Radio>
              </Radio.Group>
            )}
          </Form.Item>
          <Form.Item
            {...formItemLayout}
            label='备注'
          >
            {getFieldDecorator('bz', {
              rules: [
                {
                  max: 200,
                  message: '限200个字',
                },
              ],
            })(
              <Input.TextArea style={{ height: 160, width: '80%' }} placeholder='请输入备注信息，限200个字' />
            )}
          </Form.Item>
          <Form.Item
            {...formItemLayout}
            label='物流申请人'
          >
            {getFieldDecorator('wlsqr', {
              rules: [
                {
                  required: true,
                  message: '请输入物流申请人',
                },
              ],
            })(
              <Input style={{ width: '30%' }} placeholder='请输入物流申请人姓名' />
            )}
          </Form.Item>
          <Form.Item
            {...formItemLayout}
            label='联系方式'
          >
            {getFieldDecorator('lxfs', {
              rules: [
                {
                  required: true,
                  message: '请输入联系方式',
                },
              ],
            })(
              <Input style={{ width: '30%' }} placeholder='请输入联系方式' />
            )}
          </Form.Item>
          <Form.Item
            {...formItemLayout}
            label='报价有效期'
          >
            <span style={{ marginRight: 10 }}>自今日起</span>-
            {getFieldDecorator('bjyxq', {
              rules: [
                {
                  required: true,
                  message: '请选择报价有效期',
                },
              ],
            })(
              <DatePicker style={{ marginLeft: 10 }} showTime />
            )}
          </Form.Item>
          <Form.Item
            wrapperCol={{ xs: { span: 24 }, sm: { span: 10, offset: 2 } }}
          >
            <Button type='primary' htmlType='submit'>申请物流</Button>
          </Form.Item>
        </Form>
      </React.Fragment>
    );
  }
}

export default Form.create()(CarRental);
